<!--
* @Author: kf
* @Date: 2023-09-08 16:42:02
* @LastEditors: white_queen
* @LastEditTime: 2023-11-27 09:00:46
* @FilePath: /components/kf-cell/kf-cell.vue
* @Description: 二维码分享弹窗
* 传参:mobileList=联系方式数组（多个）
* 		texttip：提示语
* 		ewm：二维码
* 		
* 示例 
- html
 <kf-popup-qrcode ref="refpopupqrcode" style="width: 100%;"></kf-popup-qrcode>
 - js

this.$refs.refpopupqrcode.open({
		title: "温馨提示",
		content: "你好丫",
		cancelText: "错的",
		confirmText: "对的",
		ewm:'https://bkimg.cdn.bcebos.com/pic/2934349b033b5bb571dc8c5133d3d539b600bc12?x-bce-process=image/resize,m_lfit,w_536,limit_1/quality,Q_70',
		mobileList:[1511111111,1244444444],
		texttip:"长安识别二维码添加客服微信",
		success: () => {
			console.log("对的")
		},
		fail: () => {
			console.log("错的")
		},
		complete: () => {
			console.log("通用")
		},
	})
-->
<template>
	<view class="zero-privacy" :class="[{ 'zero-bottom': position == 'bottom' }]" v-if="showPrivacy">
		<view class="zero-privacy-container" :style="{ '--color': color, '--bgcolor': bgcolor }">
			<view class="closeimg" @click="handleRefuse">
				<image :src="closeimg" mode=""></image>
			</view>
			<view class="title">
				{{ title }}
			</view>
			<view class="content1" v-for="(item, index) in mobileList" :key="index">
				<view class="con1_h1">
					<view class="con1_text1">客服热线</view>
					<view class="con1_text2" @click="bdcik(item)">拨打</view>
				</view>
				<view class="con1_h2">{{ item }}</view>
			</view>

			<view class="content2">
				<image :show-menu-by-longpress="true" :src="ewm" mode=""></image>
				<view class="con2_text1">{{texttip}}</view>
			</view>
			<view class="content2">
				<image :show-menu-by-longpress="true" :src="ewm2" mode=""></image>
				<view class="con2_text1">{{texttip}}</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	name: 'kf-privacy',
	emits: ['agree', 'disagree'],
	props: {
		position: {
			//位置
			type: String,
			default: 'center'
		},
		color: {
			//按钮颜色
			type: String,
			default: 'rgba(52, 106, 255, 1)'
		},
		bgcolor: {
			//背景颜色
			type: String,
			default: '#ffffff'
		}
	},
	data() {
		return {
			texttip:"",
			ewm:"",
			ewm2:"",
			mobileList: [],
			closeimg: '',
			title: '温馨提示', //头部文字
			confirmText: '同意',
			cancelText: '拒绝',
			content: '',
			funcConfirm: null, //确认方法
			funcCancel: null, //取消方法
			funcComplete: null,
			showPrivacy: false //弹框显示隐藏
		}
	},
	methods: {
		bdcik(e) {
			uni.makePhoneCall({
				phoneNumber: e //仅为示例
			})
		},
		//显示
		open({ title = '温馨提示', content = '',texttip="",ewm="",ewm2="",mobileList=[], cancelText = '拒绝', confirmText = '同意', success, fail, complete }) {
			this.title = title
			this.content = content
			this.cancelText = cancelText
			this.confirmText = confirmText
			this.funcConfirm = success
			this.funcCancel = fail
			this.funcComplete = complete
			this.ewm = ewm
			this.ewm2 = ewm2
			this.mobileList = mobileList
			this.showPrivacy = true
			this.texttip=texttip
		},
		//隐藏
		close() {
			this.showPrivacy = false
		},
		// 点击同意
		handleAgree() {
			this.close()
			this.funcConfirm && this.funcConfirm()
			this.funcComplete && this.funcComplete()
		},
		// 点击取消
		handleRefuse() {
			this.close()
			this.funcCancel && this.funcCancel()
			this.funcComplete && this.funcComplete()
		}
	},
	created() {}
}
</script>

<style lang="scss">
.closeimg {
	padding: 20rpx;
	position: absolute;
	right: 10rpx;
	top: 10rpx;
	image {
		width: 36rpx;
		height: 36rpx;
	}
}
.content1 {
	margin-top: 41rpx;
	border-bottom: 2rpx solid #e1e1e1;
	padding-bottom: 23rpx;
	.con1_h1 {
		display: flex;
		justify-content: space-between;
		.con1_text1 {
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(149, 151, 162, 1);
			text-align: left;
			vertical-align: top;
		}
		.con1_text2 {
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(68, 76, 252, 1);
			text-align: left;
			vertical-align: top;
		}
	}
	.con1_h2 {
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 40.54rpx;
		text-align: left;
		margin-top: 8rpx;
		vertical-align: top;
	}
}
.content2 {
	margin-top: 61rpx;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	image {
		width: 240rpx;
		height: 240rpx;
	}
	.con2_text1 {
		margin-top: 30rpx;
		font-size: 28rpx;
		font-weight: 500;
		letter-spacing: 0rpx;
		line-height: 39.2rpx;
		color: rgba(153, 153, 153, 1);
		text-align: center;
		vertical-align: top;
	}
}

.zero-privacy {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	animation: fadeIn 0.2s linear both;
}
.zero-privacy-container {
	position: relative;
	box-sizing: border-box;
	border-radius: 16rpx;
	width: 630rpx;
	min-height: 380rpx;
	background: var(--bgcolor);
	padding: 50rpx;
	font-size: 14px;
	animation: fadeInBig 0.2s 0.2s linear both;
	backdrop-filter: blur(10rpx); //毛玻璃属性
	.title {
		font-size: 30rpx;
		color: rgba(51, 51, 51, 1);
		font-weight: 500;
		letter-spacing: 0rpx;
		line-height: 43.44rpx;
		text-align: center;
	}
	.content {
		color: rgba(112, 112, 112, 1);
		margin-top: 36rpx;
		font-size: 26rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 37.64rpx;
		margin-bottom: 52rpx;
		text {
			color: var(--color);
		}
	}
	.footer {
		display: flex;
		justify-content: space-between;
		// 重置微信小程序的按钮样式
		button:after {
			border: none;
		}
		.btn {
			min-width: 240rpx;
			line-height: 76rpx;
			border-radius: 10rpx;
			padding: 0 10rpx;
			text-align: center;
			font-size: 28rpx;
			white-space: nowrap;
			word-break: break-all;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.disagree-btn {
			background: rgba(240, 240, 240, 1);
			font-size: 32rpx;
			font-weight: 500;
			letter-spacing: 0rpx;
			color: rgba(112, 112, 112, 1);
		}
		.agree-btn {
			background: rgba(52, 106, 255, 1);
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			color: rgba(255, 255, 255, 1);
			margin: 0;
		}
	}
}
.zero-bottom {
	align-items: flex-end;
	.zero-privacy-container {
		width: 100%;
		animation: fadeIn 0.2s linear both;
		animation: fadeInUp 0.2s 0.2s linear both;
		// padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
		border-radius: 24px 24px 0 0;
	}
	.footer {
		padding: 0 40rpx;
		.btn {
			min-width: 250rpx;
		}
	}
}
@keyframes fadeIn {
	0% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadeInBig {
	0% {
		opacity: 0;
		transform: scale(0.5);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
</style>